<template>
	<view class="photo">
		<view class="item-box">
			<view class="box-left">
				<view class="title">身份证(人像面)</view>
				<view class="describe">请拍摄/上传彩色高清实拍身份证人像面照片</view>
			</view>
			<view class="box-right" @click="upfront">
				<image v-if="cleanerForm.front" :src="cleanerForm.front" mode="aspectFill" class="img"></image>
				<view v-else class="upload-box">
					<image src="/static/image/take.svg" mode="" class="icon"></image>
				</view>
				<view class="upload">上传</view>
			</view>
		</view>

		<view class="item-box">
			<view class="box-left">
				<view class="title">身份证(国徽面)</view>
				<view class="describe">请拍摄/上传彩色高清实拍身份证国徽面照片</view>
			</view>
			<view class="box-right" @click="upback">
				<image v-if="cleanerForm.back" :src="cleanerForm.back" mode="aspectFill" class="img"></image>
				<view v-else class="upload-box">
					<image src="/static/image/take.svg" mode="" class="icon"></image>
				</view>
				<view class="upload">上传</view>
			</view>
		</view>

		<view class="item-box">
			<view class="box-left">
				<view class="title">从业资格证照片</view>
				<view class="describe">请拍摄/上传本人从业资格证姓名所在页的高清实拍照片</view>
			</view>
			<view class="box-right" @click="upqual">
				<image v-if="cleanerForm.qualification" :src="cleanerForm.qualification" mode="aspectFill" class="img">
				</image>
				<view v-else class="upload-box">
					<image src="/static/image/take.svg" mode="" class="icon"></image>
				</view>
				<view class="upload">上传</view>
			</view>
		</view>

		<view class="item-box">
			<view class="box-left">
				<view class="title">健康证照片</view>
				<view class="describe">请拍摄/上传本人有效期内的健康证高清实拍照片</view>
			</view>
			<view class="box-right" @click="uphealth">
				<image v-if="cleanerForm.health" :src="cleanerForm.health" mode="aspectFill" class="img">
				</image>
				<view v-else class="upload-box">
					<image src="/static/image/take.svg" mode="" class="icon"></image>
				</view>
				<view class="upload">上传</view>
			</view>
		</view>

		<view class="item-box">
			<view class="box-left">
				<view class="title">其他资质照片</view>
				<view class="describe">如有其他相关资质照片，请在此处上传</view>
			</view>
			<view class="box-right" @click="upflair">
				<image v-if="cleanerForm.flair" :src="cleanerForm.flair" mode="aspectFill" class="img">
					<view v-else class="upload-box">
						<image src="/static/image/take.svg" mode="" class="icon"></image>
					</view>
					<view class="upload">上传</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<button class="btn" @click="Toinfo">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cleanerForm: {
					front: '', // 身份证正面
					back: '', // 反面
					qualification: '', // 资格证
					health: '', // 健康证
					flair: '' //其他证
				}

			}
		},
		// onLoad() {
		// 	this.cleanerForm = JSON.parse(uni.getStorageSync('cleanerForm'))
		// },
		methods: {
			Toinfo() {
				if (!this.cleanerForm.front) return uni.$showMsg('请上传身份证正面照片')
				if (!this.cleanerForm.back) return uni.$showMsg('请上传身份证反面照片')
				// if (!this.cleanerForm.qualification) return uni.$showMsg('请上传从业资格证')
				// if (!this.cleanerForm.health) return uni.$showMsg('请上传健康证')
				// 存储本地
				// uni.setStorageSync('cleanerForm', JSON.stringify(this.cleanerForm))
				uni.$emit('upimage', this.cleanerForm)
				uni.navigateBack()

			},
			upfront(data) {
				let _that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						let image = res.tempFilePaths
						uni.uploadFile({
							url: 'https://cleaning.51meteor.com/api/common/upload', //上传图片api
							filePath: image[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: (resb) => {
								let group = JSON.parse(resb.data)
								_that.cleanerForm.front = group.data.fullurl

							}
						})
					}
				})
			},

			upback() {
				let _that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						let image = res.tempFilePaths
						uni.uploadFile({
							url: 'https://cleaning.51meteor.com/api/common/upload', //上传图片api
							filePath: image[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: (resb) => {
								let group = JSON.parse(resb.data)
								_that.cleanerForm.back = group.data.fullurl

							}
						})
					}
				})
			},

			upqual() {
				let _that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						let image = res.tempFilePaths
						uni.uploadFile({
							url: 'https://cleaning.51meteor.com/api/common/upload', //上传图片api
							filePath: image[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: (resb) => {
								let group = JSON.parse(resb.data)
								_that.cleanerForm.qualification = group.data.fullurl

							}
						})
					}
				})
			},

			uphealth() {
				let _that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						let image = res.tempFilePaths
						uni.uploadFile({
							url: 'https://cleaning.51meteor.com/api/common/upload', //上传图片api
							filePath: image[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: (resb) => {
								let group = JSON.parse(resb.data)
								_that.cleanerForm.health = group.data.fullurl

							}
						})
					}
				})
			},
			upflair() {
				let _that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						let image = res.tempFilePaths
						uni.uploadFile({
							url: 'https://cleaning.51meteor.com/api/common/upload', //上传图片api
							filePath: image[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token')
							},
							success: (resb) => {
								let group = JSON.parse(resb.data)
								_that.cleanerForm.flair = group.data.fullurl

							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.photo {
		overflow: hidden;
		padding-bottom: 158rpx;
		background-color: #f7f7f7;

		.item-box {
			display: flex;
			justify-content: space-between;
			margin-top: 18rpx;
			font-size: 26rpx;
			background-color: #fff;
			padding: 31rpx 31rpx 32rpx 33rpx;

			.box-left {
				.title {
					font-weight: 600;
					margin: 10rpx 0 26rpx;
				}

				.describe {
					padding-right: 100rpx;
				}
			}

			.box-right {
				display: flex;
				flex-direction: column;

				.img {
					width: 125rpx;
					height: 125rpx;
				}


				.upload-box {
					width: 125rpx;
					height: 125rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 12rpx;
					border: 1rpx solid #01C3A8;

					.icon {
						width: 47rpx;
						height: 39rpx;
					}


				}

				.upload {
					width: 125rpx;
					height: 50rpx;
					line-height: 50rpx;
					margin-top: 20rpx;
					background: #01C3A8;
					border-radius: 25rpx;
					color: #fff;
					text-align: center;
				}
			}
		}

		// 底部
		.footer {
			width: 100%;
			height: 128rpx;
			background-color: #fff;
			padding: 20rpx 0;
			position: fixed;
			bottom: 0;
			left: 0;

			.btn {
				width: 676rpx;
				height: 84rpx;
				line-height: 84rpx;
				background-color: #01C3A8;
				color: #F3FFFE;
				font-size: 30rpx;
				border-radius: 42rpx;
			}

			button.btn::after {
				border: none;
			}
		}
	}
</style>
